<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for标签</title>
    <link rel="stylesheet" href="../../static/css/index.css">
    <style>
        table {
            margin: 0 auto;
        }

        .main2 {
            height: 200px;
            width: 200px;
            border: 1px solid black;
            margin: 50px auto;
        }

        .p1 {
            font-size: 20px;
        }
    </style>
</head>
<body>
<div class="main">
    <table border="1" cellspacing="0">
        <caption>书本信息</caption>
        <thead>
        <tr>
            <td>序号</td>
            <td>书名</td>
            <td>作者</td>
        </tr>
        </thead>
        <tbody>
        {#        reversed是反向遍历#}
        {% for book in books reversed %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ book.name }}</td>
                <td>{{ book.author }}</td>
            </tr>
        {% empty %}
            <tr>没有任何图书</tr>
        {% endfor %}
        </tbody>
    </table>
    <div class="main2">
        {% for key,value in person.items %}
            <p class="p1">{{ key }}:{{ value }}</p>
        {% endfor %}
    </div>
</div>
</body>
</html>